<!--
 * @Author: wangjh wangjiahui0710@163.com
 * @Date: 2024-05-21 09:54:00
 * @LastEditors: wangjh wangjiahui0710@163.com
 * @LastEditTime: 2024-07-22 16:23:58
 * @FilePath: \hn-fire-product-mobile\src\pages\home\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import { useUserStore } from '@/stores/user';
import {useRouter} from 'vue-router'
import {whManagerBsTbArticleGetMyExamListUsingPost} from '@/genapi/wh'


defineOptions({ name: 'SafetyEdu' });

const userStore = useUserStore();

const router = useRouter()
function articleItemClick(id){
    userStore.articleId = id
router.replace({ path: '/home/articlePage'})
}
const articleList = ref<Record<string,any>>([])
whManagerBsTbArticleGetMyExamListUsingPost({}).then((res)=>{
    articleList.value = res.data  
    
      
})
</script>

<template>
	<div class="safetyEdu">
        <div class="articleItem" v-for="(item) in articleList" :key="item?.id" @click="articleItemClick(item.articleFileId)">
            <div class="articleDetails">
                <div class="articleLabel">
                    安全教育 |
                    <span class="articleTitle">{{ item.articleName }}</span>
                </div>
                <span class="timeStamp">发表时间：{{ item.uploadTime }}</span>
            </div>
            <img class="isOpened" src="../assets/opened.png" v-if="item.learned==='1'"></img>
            
        </div>
    </div>
</template>

<style scoped lang="scss">
.safetyEdu {
	height: 100%;
	width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    .articleItem{
        width:100%;
        height:70px;
        display: flex;
        justify-content: space-between;
        background-color: #F9FAFD;
        padding:10px 10px;
        font-size:14px;
        .articleDetails{
            width:80%;
        }
        .articleLabel{
            width:100%;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
            text-wrap: nowrap;
            color:#4691d6;
            font-weight:600;
            span{
                color:#000;
                font-weight:300;
            }
        }
        .timeStamp{
            font-size:11px;
            font-weight:600;
            color:#9699a1;
        }
        .isOpened{
            width:40px;
            height:19px;
        }
    }
}
</style>
